import React, {Component} from "react";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import Debounce from "lodash.debounce";


class Pie extends Component {
  state = {
    chart: null,
    option: {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      title: {
        text: "",
        x: '45%',
        y: '0%',
        textAlign: 'center'
      },
      legend: {
        selectedMode:false,
        formatter: null,
        data: ['分数'], // 和series中的data的名字要一致
        // data: ['高等教育学'],
        // itemGap: 50,
        left: 'center',
        top: '53%',
        icon: 'none',
        align:'center',
        textStyle: {
          color: "#000",
          fontSize: 12,
        },
      },

      graphic: {
        type: 'text',
        left: 'center',
        top: '40%',
        style: {
          text: `80%`,
          fill: '#000',
          font: '14px Microsoft YaHei'
        }
      },
      series: [
        {
          center:["50%","55%"],
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          hoverAnimation: true,
          avoidLabelOverlap: false,
          silent: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: [
            {value: 9, name: ''},
            {value: 91, name: ''}
          ]
        }
      ]
    },
    curScore: null,
    getColor: score => {
      if (score >= 85) return '#3de16b'
      if (score >= 75) return '#91C7AD'
      if (score >= 60) return '#E1A55C'
      return '#E1504A'
    }
  };


  componentDidMount() {
    const {chartId, name} = this.props;
    // 基于准备好的dom，初始化echarts实例
    this.state.option.title.text = name;
    this.state.chart = echarts.init(document.getElementById(chartId));
    // 绘制图表

    this.state.chart.setOption(this.state.option);
    addResizeHook(this, Debounce(() => {
      this.state.chart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: 0})
    }, 100))
  }

  shouldComponentUpdate() {
    return false
  }

  getColor = score => {
    if (score >= 85) return '#3de16b'
    if (score >= 75) return '#91C7AD'
    if (score >= 60) return '#E1A55C'
    return '#E1504A'
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    const {data} = nextProps;
    const {curScore,option} = prevState;


    if (data && data !== curScore && data !== null) {

      const scorePart = data.CG_LT_GL_GL04_Score ? `${data.CG_LT_GL_GL04_Score.toFixed(2)}` : '无有效数据';
      const statusPart = data.CG_LT_GL_GL04_Status;

      option.legend.formatter = scorePart;
      option.series[0].data[0] = {
        value: scorePart,
        name: '分数',
        itemStyle: {color: prevState.getColor(scorePart)}
      };
      option.series[0].data[1] = {value: 100 - scorePart, name: '', itemStyle: {color: '#fff'}};
      option.graphic.style.text = statusPart;

      if (prevState.chart != null) {
        prevState.chart.setOption(prevState.option, true);
        prevState.chart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: 0});
      }

      return {
        curScore: data
      }
    }

    return null;

  }

  render() {
    const {chartId} = this.props
    return (
      <div id={chartId} style={{height: 140, width: '100%'}}/>
    )
  }
}

export default Pie
